<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>美食派系统-新增商品</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport"
		  content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="media/layui/css/layui.css" media="all">
	<script type="text/javascript" src="media/js/jquery.min.js"></script>
	<script src="media/layui/layui.js"></script>
<script type="text/javascript">



  var   form ;

</script>
</head>
<body>

	<div class="layui-container" style="margin-top: 5px">
		<form class="layui-form"  id="form1">

			<div class="layui-form-item">
				<label class="layui-form-label">商品名称</label>
				<div class="layui-input-block">
					<input type="text" name="productName"  autocomplete="off"
						class="layui-input" id="productName">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">单价</label>
				<div class="layui-input-block">
					<input type="number" name="productPrice" lay-verify="require"
						autocomplete="off" class="layui-input" id="productPrice">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">库存</label>
				<div class="layui-input-block">
					<input type="number" name="productStock" lay-verify="require"
						autocomplete="off" class="layui-input" id="productStock">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">所属类目</label>
				<div class="layui-input-block">
					<select name="categoryType" id="f3">
					</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">上下架</label>
				<div class="layui-input-block">
					<select name="productStatus" >
						<option value="0">上架</option>
						<option value="1">下架</option>
					</select>
				</div>
			</div>



			<div class="layui-form-item">

				<label class="layui-form-label">照片</label> <img alt="图片预览"
					id="ylimg" src="" width="200px" height="200px" />

				<button type="button" class="layui-btn" id="test1">
					<i class="layui-icon">&#xe67c;</i>上传图片
				</button>
				<input class="layui-btn" id="productIcon" name="productIcon"
					   style="margin-left: 100px;display: none" value="url">
			</div>


			<div class="layui-form-item">
				<input class="layui-btn" id="btn1"
					style="margin-left: 100px" type="button" value="确认修改">
			</div>
		</form>
	</div>
	<script type="text/javascript">

		// 提交表单
		$("#btn1").click(function () {
			$.ajax({
				type:"post",
				url:"meishipai/product-info/addProduct",
				data:$("form").serialize(),
				success:function (data) {
					alert(data.msg);
					window.location = "productlist.html";
				}
			})
		});

		function initData() {
			$.get("meishipai/product-category/listCategory", null, function(arr) {

				for (i = 0; i < arr.data.length; i++) {

						$("#f3").append(
								"<option value='"+arr.data[i].categoryType+"'>" + arr.data[i].categoryName
								+ "</option>");
				}
				form.render("select");
			});
		}

		layui.use([ 'form', 'upload', 'layedit', 'laydate' ], function() {
			form = layui.form, layer = layui.layer, layedit = layui.layedit,
					laydate = layui.laydate;

			var upload = layui.upload;
			//执行实例
			var uploadInst = upload.render({
				elem: '#test1' //绑定元素
				,url: 'meishipai/product-info/fileUpload' //上传接口
				,accept:'file' // file代表所有文件，默认是images代表图片
				,size:10000 // 文件最大100kb
				,done: function(res){
					//上传完毕回调
					layui.layer.msg("ok");

					$("#productIcon").val(res.data);
					$("#ylimg").attr("src",res.data);
				}
				,error: function(){
					//请求异常回调
					layui.layer.msg("error");
				}
			});


			initData();
		});
	</script>
	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

</body>
</html>
